<template>
  <div>
    <ul class="tabs">
      <li v-for="(item ,index) of tabList" :key="index" class="tab" 
        @click="iscur = index, toggleTab(item.sex)"
        :class="{cur:iscur == index}"
      ><a>{{item.name}}</a></li>
    </ul>
    <!-- is 特性动态切换子组件，使用 kee-alive 缓存 -->
    <prince :is="currentTab" keep-alive></prince>
  </div>
</template>

<script>
  // 引入子组件
  import man from './components/man'
  import woman from './components/woman'
  export default {
    name: 'homeTabs',
    data () {
      return {
        currentTab: 'woman', // currentTab 用于标识当前触发的子组件
        tabList: [
          {
            index: '0',
            name: '女生',
            sex: 'woman'
          },
          {
            index: '1',
            name: '男生',
            sex: 'man'
          }
        ],
        iscur: 0
      };
    },
    components: { // 声明子组件
      man,
      woman
    },
    methods: {
      toggleTab: function(tab) {
        this.currentTab = tab; // tab 为当前触发标签页的组件名
        return false;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
  .tabs
    display flex
    border-bottom 1px solid #f7f7f7
    line-height .34rem
    .tab
      padding 0 .3rem
      &:hover{color:#f00;}
      &:active{color:#f00;}
      &:nth-child(1)
        margin-right 1.1rem
      a
        color $c333
        font-size .3rem
        position relative
        &:after
          content ""
          background $cfff
          bottom 0
          display block
          height .15rem
          left 0
          position absolute
          width .7rem
          z-index -1
    .cur
      a
        &:after
          content ""
          background $c21b
          bottom 0
          display block
          height .15rem
          left -.04rem
          position absolute
          width .7rem
          z-index -1
</style>
